<template>
  <div>
    <div class="top">
      <van-icon name="arrow-left" class="icon" @click="re" />
      <span> 辣妈优选 </span>
    </div>
    <main class="content___308C2">
      <div class="banner___3hj6k">
        <img
          src="https://img.alicdn.com/imgextra/i2/2053469401/O1CN01sslbGT2JJi0dfj6Qy_!!2053469401.png"
          alt="not found"
        />
      </div>
      <van-tabs
        background="rgb(0,0,0,0)"
        title-active-color="#FFFFFFFF"
        title-inactive-color="#FFFFFF99"
        line-width=".25rem"
        v-if="mon"
        @click="mon2"
      >
        <van-tab
          v-for="i in mon.categoryRespVOS"
          :title="i.cateName"
          :key="i.id"
          :name="i.id"
        >
          <van-list
            v-model:loading="state.loading"
            :finished="state.finished"
            finished-text="没有更多了"
            @load="onLoad"
            v-if="mons"
          >
            <div class="li" v-for="item in mons.lists" :key="item.id">
              <div class="productImg___2Qvw9">
                <div class="imgPerch___J2hrc">
                  <img
                    :src="item.pic"
                    class="fadeIn"
                    height="200"
                    width="200"
                  />
                </div>
              </div>
              <div>
                <div class="title___27a4v">
                  <div class="shoplabel___1_Nv0 undefined">
                    <img
                      src=""
                    />
                  </div>
                  <span> {{ item.title }}</span>
                </div>
                <div
                  style="display: flex; margin-bottom: 6px; align-items: center"
                >
                  <div class="coupon___2SVZi">
                    <span>券</span>{{ item.quanJine }} 元
                  </div>
                </div>
                <div class="price___w_kLb">
                  <span>¥</span
                  ><span class="juanPrice___qL-ZT">{{ item.jiage }} </span
                  ><span>活动价</span
                  ><span class="originPrice___3iaC7">¥{{ item.yuanjia }} </span>
                </div>
                <div class="shopName___3MT1a">
                  <span>{{ item.shopName }} </span>
                </div>
                <div class="btn___1Zyul">
                  <span class="tobuy___2ZmM2">去购买</span
                  ><span>{{ item.xiaoliang }} 人已购</span>
                </div>
              </div>
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
    </main>
  </div>
</template>
<script lang="ts">
import router from "@/router";
import { computed, defineComponent, onMounted, reactive } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const store = useStore();
    const state = reactive({
      list: [],
      loading: false,
      finished: false,
    });
    const re = () => {
      router.go(-1);
    };

    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        // 加载状态结束
        state.loading = false;

        // 数据全部加载完成
        if (state.list.length >= 40) {
          state.finished = true;
        }
      }, 1000);
    };
    const mon2 = (name: string) => {
      store.dispatch({
        type: "mon2/getmon2",
        params: {
          categoryId: name,
        },
      });
    };
    onMounted(() => {
      store.dispatch({
        type: "mon1/getmon1",
      });
      store.dispatch({
        type: "mon2/getmon2",
        params: {
          categoryId: "",
        },
      });
    });
    const mon: any = computed(() => store.state?.mon1?.states?.data);
    const mons: any = computed(() => store.state?.mon2?.states?.data);
    console.log(mons);

    return { state, onLoad, mon, mon2, mons, re };
  },
});
</script>

<style lang="stylus" scoped>
.top {
  height: 0.45rem;
  color: white;
  background: rgb(189, 0, 255);
  font-size: 0.18rem;
  line-height: 0.45rem;
  text-align: center;
   position fixed
  width 100%
  z-index 100

  .icon {
    float: left;
    line-height: inherit;
  }
}

/deep/.van-tabs__line {
  background: #FFFFFFFF;
}

.li {
  width: 3.55rem;
  height: 1.1rem;
  background: #fff;
  border-radius: 0.08rem;
  padding: 0.09rem;
  margin: 0.1rem auto 0;
  position: relative;
  box-sizing: border-box;

  .productImg___2Qvw9 {
    float: left;
    margin-right: 0.1rem;
    position: relative;

    .imgPerch___J2hrc {
      width: 0.92rem;
      height: 0.92rem;
      border-radius: 0.05rem;

      img {
        width: 0.92rem;
        height: 0.92rem;
        border-radius: 0.05rem;
      }
    }
  }
}

.shoplabel___1_Nv0 {
  height: 0.13rem;
  float: left;

  img {
    height: 100%;
    display: block;
  }
}

.content___308C2 {
  min-height: calc(100vh - 0.45rem);
  background: url('https://cmsstatic.ffquan.cn/dist/static/header_bg.747dcea0.png') no-repeat;
  margin-top: 0px;
  background-size: 3.75rem;
  overflow: hidden;
}

.banner___3hj6k {
  width: 3.45rem;
  height: 1.26rem;
  border-radius: 0.06rem;
  margin: 0.1rem auto 0;

  img {
    width: 100%;
    height: 100%;
    border-radius: 0.06rem;
  }
}

.title___27a4v {
  height: 0.18rem;
  font-size: 0.13rem;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #333;
  line-height: 0.18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.11rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;

  span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 0.025rem;
  }
}

.coupon___2SVZi {
  height: 0.12rem;
  background: linear-gradient(90deg, #ff8873, #ff4f4f);
  border-radius: 0.02rem;
  display: inline-block;
  line-height: 0.12rem;
  padding: 0 0.03rem 0 0.01rem;
  font-size: 0.095rem;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #fff;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;

  span {
    display: inline-block;
    font-size: 0.09rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff5351;
    line-height: 0.095rem;
    padding: 1px 0.02rem;
    background: #fff;
    border-radius: 0.01rem 0 0 0.01rem;
    text-align: center;
    margin-right: 0.03rem;
  }
}

.price___w_kLb {
  font-size: 0.1rem;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #fe3738;
  margin-top: 0.125rem;
}

.juanPrice___qL-ZT {
  font-size: 0.17rem;
  font-weight: 500;
  color: #fe3738;
  margin-right: 0.02rem;
  font-family: PingFangSC-Medium, PingFang SC;
}

.originPrice___3iaC7 {
  text-decoration: line-through;
  height: 0.13rem;
  font-size: 0.1rem;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #999;
  line-height: 0.13rem;
  margin-left: 0.05rem;
}

.shopName___3MT1a {
  height: 0.17rem;
  font-size: 0.11rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #888;
  line-height: 0.16rem;
}

.btn___1Zyul {
  width: 0.8rem;
  height: 0.34rem;
  background: linear-gradient(90deg, #d65dff, #fe4aeb);
  box-shadow: 0 0.02rem 0.03rem 0 rgba(235, 73, 251, 0.25);
  border-radius: 1rem 0.02rem 0.02rem 1rem;
  position: absolute;
  bottom: 0.12rem;
  right: -0.04rem;
  border: 1px solid transparent;
  z-index: 1;
  padding-left: 0.14rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;

  span {
    font-size: 0.12rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #fff;
  }
}
</style>
